<script setup>
import { onLoad,onReady, onReachBottom } from "@dcloudio/uni-app";
import { ref } from "vue";



onLoad(()=>{
  uni.showToast({
    icon:'loading'
  })
})
onReady(()=>{
  uni.hideToast();
})

function toShopList(){
  uni.navigateTo({
    url:'/classification/shopList/shopList'
  })
}

function onNavTo(){
  uni.navigateTo({
    url:'/classification/shopList/shopList?id=1'
  })
}
</script>

<template>


  <view>
    <view class="header">
      <view><up-input
          placeholder="前置图标"
          prefixIcon="search"
          prefixIconStyle="font-size: 22px;color: #909399"
          customStyle="width: 530rpx;height: 61rpx;background: #fff;border-radius: 40rpx;margin: auto;"
      ></up-input></view>
      <view class="header-title" @click="toShopList">搜索</view>
    </view>

  </view>
<!--  end header-->
  <view class="historySearch">
    <view class="history-title">
      <view class="left">搜索历史</view>
      <view class="right">清空历史记录</view>
    </view>
    <view class="historyLabel">
      <view class="label-min" @click="onNavTo" v-for="(item,index) in 10" :key="index">大闸蟹</view>
    </view>
  </view>
<!--  history end-->

  <view class="historySearch">
    <view class="history-title">
      <view class="left">推荐搜索</view>
    </view>
    <view class="historyLabel">
      <view class="label-min" @click="onNavTo"  v-for="(item,index) in 10" :key="index">男士服装</view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.header{
  width:750rpx;
  background:#f8f8f8;
  display:flex;
  align-items: center;
  justify-content: center;
  .header-title{
    font-size:30rpx;
    margin-left:30rpx;
  }
}
// 历史记录
.historySearch{
  width:750rpx;
  .history-title{
    display:flex;
    box-sizing: border-box;
    .left{
      font-size:30rpx;
      font-weight:900;
      margin-top:30rpx;
      margin-left:30rpx;
    }
    .right{
      font-size:25rpx;
      color: rgba(0, 0, 0, 0.49);
      margin-top:30rpx;
      margin-left:400rpx;
    }
  }
  .historyLabel{
    width:750rpx;
    box-sizing: border-box;
    padding:0 30rpx;
    display:flex;
    flex-wrap:wrap;
    margin-bottom:20rpx;
    .label-min{
      width:auto;
      margin-left:30rpx;
      margin-top:30rpx;
      background: #f8f8f8;
      font-size:30rpx;
      padding:10rpx 40rpx;
      border-radius:30rpx;
    }
  }
}
</style>